<template>
  <div class="rechargeRecord">
    <el-card>
      <div class="serWhiteIP">
        <el-button size="small" type="primary" @click="addDialog = true"
          >添加号码</el-button
        >
        <el-dialog
          title="添加号码"
          :visible.sync="addDialog"
          width="30%"
          :before-close="handleClose"
          :close-on-click-modal="false"
          center
        >
          <el-input placeholder="请输入内容" v-model="addIP" clearable>
          </el-input>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addDialog = false">取 消</el-button>
            <el-button type="primary" @click="defAddIP()">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <div class="whiteTab" style="margin-top: 20px">
        <!-- 记录数据 -->
        <el-table :data="ipList" stripe border style="width: 100%">
          <el-table-column prop="whiteIp" label="ip地址" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="添加时间" align="center">
          </el-table-column>
          <el-table-column prop="username" label="添加人" align="center">
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-popconfirm
                title="你确认要删除吗？"
                @onConfirm="remWhiteIP(scope.row.whiteIp)"
              >
                <el-button
                  slot="reference"
                  type="danger"
                  size="small"
                  icon="el-icon-delete"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getInfo } from "@/api/user";
import { removeWhiteIp, addWhiteIp } from "@/api/log";
// 引入防抖函数
import debounce from "lodash.debounce";
export default {
  data() {
    return {
      userId: "",
      infoData: {},
      // ip表格数据
      ipList: [],
      addDialog: false,
      addIP: "",
    };
  },
  async created() {
    this.userId = window.localStorage.getItem("userId");
    this.getInfoData();
  },
  methods: {
    // 获取用户数据
    async getInfoData() {
      let res = await getInfo(this.userId);
      let strData = res.whiteIp.split(",");
      this.ipList = [];
      for (const key in strData) {
        if (strData[key]) {
          this.ipList.push({
            whiteIp: strData[key],
            username: res.username,
            createTime: res.createTime,
          });
        }
      }
      console.log(this.ipList);
    },
    // 删除ip
    async remWhiteIP(whiteIp) {
      let res = await removeWhiteIp({ ip: whiteIp });
      if (res.code == 200) {
        this.$message.error(res.msg);
        this.getInfoData();
      }
      console.log(res);
    },
    // 添加ip
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    async defAddIP() {
      let res = await addWhiteIp({ ip: this.addIP });
      if (res.code == 200) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        this.addDialog = false;
        this.addIP = "";
        this.getInfoData();
      }
    },
  },
};
</script>
